<template>
  <view class="date-selector">
    <view class="ds-options">
      <view
        class="ds-option-item"
        v-for="(item, index) in options"
        :key="item.name"
        :class="(activeIndex === index) && 'active'"
        @click="onSelectedCustomOption(item, index)">
        <text>{{ item.name }}</text>
        <text>{{ item.dateLabel }}</text>
      </view>
      
      <view
        class="ds-option-item"
        :class="(activeIndex === 100) && 'active'"
        @click="picker.visible = true">
        <text>更多日期</text>
      </view>
    </view>
    <u-datetime-picker
      :show="picker.visible"
      :minDate="picker.minDate"
      :visible-item-count="8"
      v-model="picker.value"
      mode="date"
      @cancel="closePicker"
      @confirm="onConfirmPicker">
    </u-datetime-picker>
  </view>
</template>

<script>
  import { formatTime } from '@/common/utils'
  
  export default {
    name: 'date-selector',
    props: {
      value: {
        type: [String, Date],
        default: ''
      }
    },
    data() {
      return {
        options: [],
        picker: {
          visible: false,
          value: '',
          minDate: +new Date()
        },
        activeIndex: ''
      }
    },
    methods: {
      // 选择自定义选项
      onSelectedCustomOption(item, index) {
        this.$emit('input', formatTime(item.value, 'YYYY-MM-DD'))
        this.activeIndex = index
      },
      
      // 确认弹出式日期选择
      onConfirmPicker(val) {
        this.$emit('input', formatTime(val.value, 'YYYY-MM-DD'))
        this.activeIndex = 100
        this.closePicker()
      },
      
      // 关闭弹出式日期选择
      closePicker() {
        this.picker.visible = false
      },
      
      // 生成今后三天日期选项
      generateOptions() {
        const now = new Date()
        this.options.push({
          name: '今天',
          dateLabel: formatTime(now, 'M月DD日'),
          value: formatTime(now, 'YYYY-MM-DD')
        })
        
        const tomo = new Date(+now + 24*60*60*1000)
        this.options.push({
          name: '明天',
          dateLabel: formatTime(tomo, 'M月DD日'),
          value: formatTime(tomo, 'YYYY-MM-DD')
        })
        
        const afterTomo = new Date(+now + 48*60*60*1000)
        this.options.push({
          name: '后天',
          dateLabel: formatTime(afterTomo, 'M月DD日'),
          value: formatTime(afterTomo, 'YYYY-MM-DD')
        })
      }
    },
    watch: {
      value: {
        handler: function(a, b) {
          // 当选择器有初始值时，激活对应选项状态
          if (a && !b) {
            const index = this.options.findIndex(item => {
              return item.value === a
            })
            this.activeIndex = index === -1 ? 100 : index
          }
        },
        immediate: true
      }
    },
    created() {
      this.generateOptions()
    }
  }
</script>

<style scoped lang="scss">
  .date-selector {
    .ds-options {
      display: flex;
      flex-direction: row;
      gap: 15rpx;
      .ds-option-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 0;
        height: 110rpx;
        border-radius: 5px;
        box-sizing: border-box;
        background: #F5F5F5;
        border: 1px solid #F5F5F5;
        &.active {
          color: $uni-primary;
          border-color: $uni-primary;
          background: $uni-primary-5;
        }
      }
    }
  }
</style>
